import React from 'react';
import Parser from './parse';

const maptypes=[
    {name:'世界地图',value:'world'},
    {name:'中国',value:'china'},
    {name:'河北',value:'hebei'},
    {name:'山西',value:'shanxi'},
    {name:'内蒙古',value:'neimenggu'},
    {name:'辽宁',value:'liaoning'},
    {name:'吉林',value:'jilin'},

    {name:'黑龙江',value:'heilongjiang'},
    {name:'江苏',value:'jiangsu'},
    {name:'浙江',value:'zhejiang'},
    {name:'安徽',value:'anhui'},
    {name:'福建',value:'fujian'},

    {name:'江西',value:'jiangxi'},
    {name:'山东',value:'shandong'},
    {name:'河南',value:'henan'},
    {name:'湖北',value:'hubei'},
    {name:'湖南',value:'hunan'},

    {name:'广东',value:'guangdong'},
    {name:'广西',value:'guangxi'},
    {name:'海南',value:'hainan'},
    {name:'四川',value:'sichuan'},
    {name:'贵州',value:'guizhou'},

    {name:'云南',value:'yunnan'},
    {name:'西藏',value:'xizang'},
    {name:'陕西',value:'shanxi1'},
    {name:'甘肃',value:'gansu'},
    {name:'青海',value:'qinghai'},

    {name:'宁夏',value:'ningxia'},
    {name:'新疆',value:'xinjiang'},
    {name:'北京',value:'beijing'},
    {name:'天津',value:'tianjin'},
    {name:'上海',value:'shanghai'},

    {name:'重庆',value:'chongqing'},
    {name:'香港',value:'xianggang'},
    {name:'澳门',value:'aomen'}
];

class Map extends React.Component {
    constructor(props){
        super(props);
        this.callback=props.callback;
        this.handleClick = this.handleClick.bind(this);
        this.handleChange = this.handleChange.bind(this);
    }
    render(){
        let that=this;
        setTimeout(function(){
            that.preview();
        },1000);
        return (
            <div>
                <input type="hidden" value={this.props.state.time} />
                <span className="opts-label">请按步骤完成下面的设置:</span>
                <div className="opts-splitline"></div>
                <span className="opts-label">1、设置Legend:</span>
                <div className="opts-item">
                    <input readOnly="readOnly" type="text" className="form-control" data-id="legend" placeholder="请在左侧画布选择" value={this.props.state.legend}/>
                    <button data-cmd="legend" onClick={this.handleClick}>选定</button>
                </div>
                <span className="opts-label">2、设置Category（区域名称）:</span>
                <div className="opts-item">
                    <input readOnly="readOnly" type="text" className="form-control" data-id="category" placeholder="请在左侧画布选择" value={this.props.state.category}/>
                    <button data-cmd="category" onClick={this.handleClick}>选定</button>
                </div>
                <span className="opts-label">3、设置Value:</span>
                <div className="opts-item">
                    <input readOnly="readOnly" type="text" className="form-control" data-id="value" placeholder="请在左侧画布选择" value={this.props.state.value}/>
                    <button data-cmd="value" onClick={this.handleClick}>选定</button>
                </div>
                <span className="opts-label">4、设置经度:</span>
                <div className="opts-item">
                    <input readOnly="readOnly" type="text" className="form-control" data-id="long" placeholder="请在左侧画布选择" value={this.props.state.long}/>
                    <button data-cmd="long" onClick={this.handleClick}>选定</button>
                </div>
                <span className="opts-label">5、设置纬度:</span>
                <div className="opts-item">
                    <input readOnly="readOnly" type="text" className="form-control" data-id="lat" placeholder="请在左侧画布选择" value={this.props.state.lat}/>
                    <button data-cmd="lat" onClick={this.handleClick}>选定</button>
                </div>
                <span className="opts-label">6、地图类型:</span>
                <div className="opts-item">
                    <select className="form-control" data-id="maptype" value={this.props.state.maptype} onChange={this.handleChange}>
                        <option value="">请选择</option>
                        {
                            maptypes.map(e=>{
                                return <option key={e.value} value={e.value}>{e.name}</option>
                            })
                        }
                    </select>
                </div>
                <div className="opts-splitline"></div>
                <span className="opts-label">6、图表预览:</span>
                <div id="chartViewer" className="opts-item" style={{height:'200px'}}>
                请先完成设置！
                </div>
            </div>
        )
    }
    handleClick(e){
        let cmd=e.target.getAttribute('data-cmd');
        if(typeof this.callback==='function'){
            this.callback(cmd);
        }
    }
    handleChange(e){
       let value=e.target.value;
        if(typeof this.callback==='function'){
            this.callback('maptype',value);
        } 
    }
    preview(){
        let that=this;
        let data=this.props.chartdata;
        let maptype=this.props.state.maptype||'china';
        let option=Parser.map(data,maptype);
        if(!!option) this.showChart(maptype,option);
    }
    showChart(maptype,option){
        let that=this;
        $.get('./assets/libs/geojson/'+maptype+'.json', function (geoJson) {
            echarts.registerMap(maptype, geoJson);
            var myChart = echarts.init(document.getElementById('chartViewer'));
            myChart.setOption(option);

            that.callback('chartoption',option);
        });
    }
}

export default Map;